//论文数据库爬取
<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-row :gutter="14" style="width: 100%;text-align: left;">
          <el-col :span="3" style="margin-left: 10px;margin-top: 10px;"><div class="grid-content ep-bg-purple" />
            可选数据库
            <el-button type="primary" @click="submitDatabase()" style="margin-right: 0;margin-top: 10px" size="mini">提交新数据库信息</el-button>
          </el-col>
    
          <el-col :span="10" style="margin-left: 10px;margin-top: 10px;">
          <div class="grid-content ep-bg-purple" />爬虫任务列表
          </el-col>
          <el-col :span="2" style="margin-right: 3%;float: right;" >
          <div class="grid-content ep-bg-purple"  />
          <el-button type="primary" @click="createSpider()" >新建爬虫任务
          </el-button></el-col>
      </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <div style="float: left;margin-top: 20px;">
            <el-table :data="tableData" >
            <el-table-column prop="supplierName" label="论文库名称" width="80" />
            <el-table-column prop="supplierWebsite" label="域名链接" width="150"/>
          </el-table>
    </div>

        </el-aside>
        <el-main>
          <Diag v-if="showDialog" ref="Diag" :dialog-title="dialogTitle" :item-info="tableItem" @closeDialog="closeDialog">
          </Diag>
          <DatabaseDiag
          v-if="showDatabaseDiag" 
          ref="DatabaseDiag" 
          :dialog-title="DatabaseDiagTitle" 
          :item-info="DatabaseDiagTitleItem" 
          @closeDialog="closeDialog"
          ></DatabaseDiag>

          <DBCreateDiag
          v-if="showDBCreateDiag"
          ref="DBCreateDiag"
          :DBCreateDiagTitle="DBCreateDiagTitle"
          :item-info="DBCreateDiagItem"
          @closeDialog="closeDialog"
          ></DBCreateDiag>

          <div v-for="(item,index) in items" style="margin-top:10px;" :key="index">
              <DatabaseList
              :item="item" :options="options" :index="index" @deletS="taskDelete" :submitUrl="submitUrl" :tableData="tableData"
              ></DatabaseList>
   </div>
        </el-main>
      </el-container>
    </el-container>
    
  </div>
  
</template>


<script>
import DatabaseList from '@/components/DatabaseList.vue'
import DatabaseDiag from '@/components/DatabaseDiag.vue';
import DBCreateDiag from '@/components/DBCreateDiag.vue';




export default {
  name: 'App',
  data () {
    return { 
      showDatabaseDiag:false,
      DatabaseDiagTitle:'新增数据库链接',
      DatabaseDiagTitleItem:{},
      tableLoading: false,
      showDialog: false,
      dialogTitle: "新增爬虫任务",
      DatabaseDiagItem:{
        commitUrl: '/api/paperCrawling/newNeeds', //提交给后端的路径 和参数
      },      //新增数据库的参数
      showDBCreateDiag:false,
      DBCreateDiagTitle:'新增论文数据库',
      DBCreateDiagItem:{
        commitUrl:'/api/paperCrawling/startTask',
        userID: '1',
        crawlerType:'essay',
        OptionalDB:[]
      },
      tableItem: {},
      items: [],
        options:{
          optionsRenew:[
          {
            value: 'Option1',
            label: '全量模式',
          },
          {
            value: 'Option2',
            label: '增量模式',
          },

          ],
          optionsPriority:[{
            value: 'Option1',
            label: '低',
          },
          {
            value: 'Option2',
            label: '中',
          },
          {
            value: 'Option3',
            label: '高',
          }]
        },
        tableData : [
             ],
        submitUrl:{
          pauseUrl:'/api/paperCrawling/pauseTask',  //暂停提交的url
          deleteUrl:'/api/paperCrawling/stopTask',
          logUrl:'/api/paperCrawling/logging'
        }

    }
  },
  components:{
      DatabaseList,
       DatabaseDiag,
       DBCreateDiag
    },
    beforeMount() {
    this.getTask('/api/paperCrawling/getTasks',)
    this.getSupple('/api/paperCrawling/getSuppliers')
  },
  methods: {
    createSpider(){
      this.showDBCreateDiag = true;
      this.$nextTick(() => {
        this.$refs["DBCreateDiag"].showDBCreateDiag = true;
      });
    },
    checkLog(){
      console.log("查看更新日志")
    },
    submitDatabase(){
        this.showDatabaseDiag=true;
        this.$nextTick(() => {
        this.$refs["DatabaseDiag"].showDatabaseDiag = true;
      });
        console.log("提交新数据库信息");
    },
    taskDelete(index){  //通过操作下表操作数组不能做到响应式 那么只能通过后端请求数据刷新页面 在下面用axios再调用一次接口即可
      console.log('执行删除第',index,'个文件');
      for(var i=index;i<this.items.length;i++){
        console.log("长度",this.items.length);
        this.items[i]=this.items[i+1]
        
      }
      this.items.pop()

  },
  percentage(row) {
            if (row.status == '未检索') {
                return 100;
            } else if (row.status == '已完成') {
                return 100;
            } else {
                return row.status;
            }
        },
  async getTask(url) {  //async  await  是解决异步的一种方案，必须要加，但是原生封装就不用
      this.$axios.get(url, {
            params: {
                userID: 1
            }
        }).then((res) => {
            console.log(res.data);
            this.items=res.data
        })
    },
    async getSupple(url) {  //async  await  是解决异步的一种方案，必须要加，但是原生封装就不用
      this.$axios.get(url, {
            params: {
                userID: 1
            }
        }).then((res) => {
          this.tableData=res.data.data
            if(res.data){
             
              this.DBCreateDiagItem.OptionalDB.push(res.data.data)
            }else{
              this.DBCreateDiagItem.OptionalDB[0]="没拿到"
            }
           
            console.log('this.DBCreateDiagItem', this.DBCreateDiagItem);
        })
    },
  }
}
</script>

<style>
.outdiv{
  display: flex;
  width: 100%;
}
.card-header{
  width: 100%;
  height: 120px;
  font-size: 15px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}

.m-2{
  width: 60%;
}
.a{
  float: left;
  color: goldenrod;
}

.b{
  float: left;
  color:red;
}
</style>

